<!-- 这里是商品详细页面 -->
<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/xijie.js"></script>
		<link rel="stylesheet" href="../css/xijie_test.css" />
		<link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css">
		<title></title>
	</head>
	<body>
		<div class="nav_div">
			<div class="d-center">
				<div class="navL">
					欢迎来到youxuan！
					<a href="#">请登录</a>
					<a class="style-red" href="#">免费注册</a>
				</div>
				<div class="navR">
					<ul>
						<li>
							<a href="#">我的订单</a>
						</li>
						<li>
							<a href="#">我的youxuan</a>
						</li>
						<li>
							<a href="#">youxuan会员</a>
						</li>
						<li>
							<a href="#">企业采购</a>
						</li>
						<li>
							<a href="#">关注youxuan</span></a>
						</li>
						<li>
							<a href="#">客户服务</span></a>
						</li>
						<li>
							<a class="style-border-none" href="#">网站导航</span></a>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<div class="head d-center">
			<div class="logo">
				<a href="../html/index_test.html"><img src="../photos/logo.png" /></a>
			</div>
			<div class="head-search">
				<input type="text" placeholder="请输入商品..." />
				<button>搜索</button>
				<ul>
					<li><a class="style-red" href="#">优惠购首发</a></li>
					<li><a href="#">亿元优惠</a></li>
					<li><a href="#">9.9团购</a></li>
					<li><a href="#">满99减30</a></li>
					<li><a href="#">办公用品</a></li>
					<li><a href="#">电脑</a></li>
					<li><a href="#">通信</a></li>
				</ul>
			</div>
			<div class="shopCar">
				<span><i class="fa fa-cart-plus"></i></span>
				<span><a href="#">我的购物车</a></span>
				<span class="count">0</span>
			</div>
		</div>

		<div class="d-center">
			<div class="top-type">
				<div class="red-top-title"><a href="#">全部商品分类</a></div>
				<ul>
					<li><a href="#">新鲜果蔬</a></li>
					<li><a href="#">手机</a></li>
					<li><a href="#">司法拍卖</a></li>
					<li><a href="#">全球购</a></li>
					<li><a href="#">闪购</a></li>
					<li><a href="#">团购</a></li>
					<li><a href="#">二手拍卖</a></li>
				</ul>
			</div>
		</div>

		<hr class="spacer-red" />

		<div class="d-center">
			<div class="url-link-word">
				<ul>
					<li><a href="#">手机、数码、通讯 </a></li>
					<li><a href="#">手机 </a>&gt;</li>
					<li><a href="#">Apple苹果 </a>&gt;</li>
					<li><a href="#">iphone 15 Pro Max</a></li>
				</ul>
			</div>
			<div class="goods-pic" style="border-radius: 35px;">
				<img src="../photos/iphone15/1.png" style="width: 360px;height: 400px;">
			</div>

			<div class="goods-detail">
				<h3>Apple/苹果 iPhone 15 Pro Max</h3>
				<p class="red-tip">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有话费返</p>
				<div class="detail-red">
					<div class="red-col-1">
						<div class="price-tag">价格</div>
						<div class="price">￥9999.00</div>
						<div class="down-price">降价通知</div>
						<div class="total-appraise">累计评价50000+</div>
					</div>

					<div class="red-col-2">
						<div class="sale-tag">优惠</div>
						<div class="sale-red-text"><a href="#">加购价</a></div>
						<div class="sale-content">官方立减1750元，苹果惊喜券满3580减300，购买得积分 <a href="#">详情</a></div>
					</div>
				</div>

				<div class="col-3">
					<div class="support-tag">保障</div>
					<div class="support-text">价保服务，极速退款，七天无理由退换</div>
				</div>

				<div class="col-4">
					<div class="choose-color-tag">机身颜色</div>
					<button class="col-4-button">原色钛金属</button><!-- id="btn-choose" -->
					<button class="col-4-button">蓝色钛金属</button>
					<button class="col-4-button">白色钛金属</button>
					<button class="col-4-button">土豪色</button>
				</div>
				
				
				<div class="col-5">
					<div class="vision-tag">版本</div>
					<button class="col-5-button">iPhone15 Pro</button>
					<button class="col-5-button">iPhone15 Pro Max</button>
				</div>

				<div class="col-6">
					<div class="buy-way-tag">购买方式</div>
					<button class="col-6-button">官方标配</button>
					<button class="col-6-button">移动优惠购</button>
					<button class="col-6-button">电信优惠购</button>
				</div>

				<div class="col-7">
					<input type="text" />
					<div class="control-num">
						<div class="add">+</div>
						<div class="sub">-</div>
					</div>
					<button class="add-shopcar">加入购物车</button>
				</div>
			</div>
		</div>
		
		<div class="d-center">
			<div class="goods-thumbnail">
				<div class="pre-btn"><i class="fa fa-angle-left"></i></div>
				<div class="thumbnail"><img src="../photos/iphone15/1.png" /></div>
				<div class="thumbnail red-border"><img  src="../photos/iphone15/1.png" /></div>
				<div class="thumbnail"><img src="../photos/iphone15/1.png" /></div>
				<div class="thumbnail"><img src="../photos/iphone15/1.png" /></div>
				<div class="next-btn"><i class="fa fa-angle-right"></i></div>
			</div>
		</div>
		
		<div class="d-center">
			<div class="relative-div">
				<div class="relative-title">
					<button>相关分类</button>
				</div>
				<ul>
					<li>
						<img src="../photos/huawei.png" style="width: 100px;height: 130px;"/>
						<p>华为 HUAWEI Mate60 Pro</p>
						<div>￥9999</div>
						<button>加入购物车</button>
					</li>
					<li>
						<img src="../photos/sanxing.png" style="width: 120px;height: 130px;"/>
						<p>三星 Galaxy S24+</p>
						<div>￥9999</div>
						<button>加入购物车</button>
					</li>
					<li>
						<img src="../photos/xiaomi.png" style="width: 120px;height: 130px;"/>
						<p>小米 Xiaomi 13</p>
						<div>￥9999</div>
						<button>加入购物车</button>
					</li>
					<li>
						<img src="../photos/vivo.png" style="width: 100px;height: 130px;"/>
						<p>vivo X100 Ultra</p>
						<div>￥9999</div>
						<button>加入购物车</button>
					</li>
					<li>
						<img src="../photos/rongyao.png" style="width: 125px;height: 130px;"/>
						<p>荣耀 Magic6</p>
						<div>￥9999</div>
						<button>加入购物车</button>
					</li>
					<li>
						<img src="../photos/meizu.png" style="width: 100px;height: 125px;"/>
						<p>魅族21</p>
						<div>￥9999</div>
						<button>加入购物车</button>
					</li>
				</ul>
			</div>
			
			<div class="detail-div">
				<div class="detail-nav">
					<ul>
						<li id="cur-nav">商品介绍</li>
						<li>规格与包装</li>
						<li>售后保障</li>
						<li>商品评价(59627)</li>
						<li>手机社区</li>
					</ul>
				</div>
				
				<div class="goods-parame">
					<ul>
						<li>品 牌：Apple</li>
						<li>机 型：Apple iphone 15 Pro Max</li>
						<li>上市日期：2023-09-13</li>
						<li>机身尺寸：宽76.7mm，长159.9mm，厚8.25mm</li>
						<li>商品重量：221g</li>
						<li>商品产地：中国大陆</li>
						<li>屏幕尺寸：6.7尺寸</li>
						<li>系 统：IOS</li>
						<li>CPU芯片：A17 Pro</li>
						<li>像 素：1200 1200 1200万像素</li>
						<li>机身内存：256GB</li>
						<li>支持IPv6：支持IPv6</li>
					</ul>
				</div>
				
				<p class="look-more"><a href="#">查看更多参数&nbsp;<i class="fa fa-angle-right"></i></a></p>
				
				<div class="goods-pics">
					<ul>
						<li><img src="../photos/iphone15/4.png" /></li>
						<li><img src="../photos/iphone15/5.png" /></li>
						<li><img src="../photos/iphone15/6.png" /></li>
						<li><img src="../photos/iphone15/7.png" /></li>
						<li><img src="../photos/iphone15/8.png" /></li>
						<li><img src="../photos/iphone15/9.png" /></li>
						<li><img src="../photos/iphone15/10.png" ></li>
					</ul>
				</div>
				
				<div class="right-table">
					<div class="right-table-item">
						<a href="#" class="right-link"><i class="fa fa-volume-control-phone"style="font-size:24px"></i>&nbsp;联系客服</a>  
					</div>
					<div class="right-table-item">
						<a href="#" class="right-link"><i class="fa fa-cart-plus"style="font-size:24px"></i>&nbsp;购物车&nbsp;</a>  
					</div>
					<div class="right-table-item">
						<a href="#" class="right-link"><i class="fa fa-warning"style="font-size:24px"></i>&nbsp;举报</a>  
					</div>
					<div class="right-table-item">
						<a href="#" class="right-link"><i class="fa fa-pencil-square-o"style="font-size:24px"></i>&nbsp;反馈</a>  
					</div>
					<div class="back-to-top-btn">
						<a href="#" id="backToTop" class="right-link"><i class="fa fa-arrow-circle-o-up"style="font-size:24px"></i>&nbsp;返回顶部</a>  
					</div>
				</div>
				
			</div>
		</div>
		
		
		<div class="bottom">
			<div class="d-center">
				<div class="bottom-top">
					<ul>
						<li>
							<div class="ensure-pic"></div>
							<h3>正品保障</h3>
							<span>正品保障，提供发票</span>
						</li>
						<li>
							<div class="ensure-pic"></div>
							<h3>正品保障</h3>
							<span>正品保障，提供发票</span>
						</li>
						<li>
							<div class="ensure-pic"></div>
							<h3>正品保障</h3>
							<span>正品保障，提供发票</span>
						</li>
						<li>
							<div class="ensure-pic"></div>
							<h3>正品保障</h3>
							<span>正品保障，提供发票</span>
						</li>
					</ul>
				</div>
				
				<div class="bottom-center">
					<div class="help-div">
						<p>购物指南</p>
						<ul>
							<li><a href="#">购物流程</a></li>
							<li><a href="#">会员介绍</a></li>
							<li><a href="#">生活旅行/团购</a></li>
							<li><a href="#">常见问题</a></li>
							<li><a href="#">大家电</a></li>
							<li><a href="#">联系客服</a></li>
						</ul>
					</div>
					<div class="help-div">
						<p>精选保障</p>
						<ul>
							<li><a href="#">发票保障</a></li>
							<li><a href="#">售后规则</a></li>
							<li><a href="#">物流时效保障</a></li>
						</ul>
					</div>
					<div class="help-div">
						<p>支付方式</p>
						<ul>
							<li><a href="#">微信支付</a></li>
							<li><a href="#">支付宝</a></li>
							<li><a href="#">数字人民币</a></li>
							<li><a href="#">信用卡</a></li>
							<li><a href="#">蚂蚁花呗</a></li>
							<li><a href="#">零钱通</a></li>
						</ul>
					</div>
					<div class="help-div">
						<p>商家服务</p>
						<ul>
							<li><a href="#">精选规则</a></li>
							<li><a href="#">商家入驻</a></li>
							<li><a href="#">商家中心</a></li>
							<li><a href="#">精选必修课</a></li>
							<li><a href="#">平台服务协议</a></li>
						</ul>
					</div>
					<div class="help-div">
		
					
					<div class="help-code">
						<p>帮助中心</p>
						<img src="../photos/erweima.png" />
						<div>youxuan客户端</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="readme-div">
			<div class="d-center">
				<ul>
					<li><a href="#">关于我们 </a>|</li>
					<li><a href="#">联系我们 </a>|</li>
					<li><a href="#">联系客服 </a>|</li>
					<li><a href="#">商家入驻 </a>|</li>
					<li><a href="#">营销中心 </a>|</li>
					<li><a href="#">手机youxuan </a>|</li>
					<li><a href="#">友情链接 </a>|</li>
					<li><a href="#">销售联盟 </a>|</li>
					<li><a href="#">youxuan社区 </a>|</li>
					<li><a href="#">youxuan公益 </a>|</li>
					<li><a href="#">English Site </a>|</li>
					<li><a href="#">Contact U</a></li>
				</ul>
				<p></p>
				<p></p>
			</div>
		</div>
	</body>
</html>

